﻿@{
    ViewBag.Title = "Trang chủ";
}

<script>
//$(function(){
//	$('#banner img:gt(0)').hide();
//	setInterval(function () { $('#banner :first-child').fadeOut().next('img').fadeIn().end().appendTo('#banner'); }, 3000);
    //});
    $(function () {
        // Xác định số lượng hình của slide
        var count = $('.img').length;

        // Thêm số nút điều khiển bằng với số hình của slide
        for (x = 0; x < count ; x++) {
            $('.slidernavigator ul').prepend("<li class='slidernavigator-slot'></li>");
        }

        $('.slidernavigator-slot:first-child').addClass('focus');

        // Khai báo biến dùng để đồng bộ hóa giữa hình ảnh và điều khiển
        var eindex = 0;

        // Click vào điều khiển sẽ hiện hình tương ứng
        $('.slidernavigator-slot').click(function () {
            eindex = $('.slidernavigator-slot').index(this);
            $('.img').stop().animate({ opacity: 0 });
            $('.img:eq(' + eindex + ')').stop().animate({ opacity: 1 });
            $('.slidernavigator-slot').removeClass('focus');
            $(this).addClass('focus');
        });

        // Function xử lý hiển thị cho hình slide và các nút điều khiển tương ứng với eindex
        // Được dùng lại một số lần ở các đoạn code bên dưới
        function setimagefocus() {
            $('.slidernavigator-slot').removeClass('focus');
            $('.slidernavigator-slot:eq(' + eindex + ')').addClass('focus');
            $('.img').stop().animate({ opacity: 0 });
            $('.img:eq(' + eindex + ')').stop().animate({ opacity: 1 });
        }

        // function xử lý quay vòng hình ảnh
        function slideswap() {
            // Nếu vị trí hiện tại đã là hình cuối cùng của slide thì sẽ chuyển eindex về -1
            // để sau eindex++ thì eindex sẽ là 0, tương ứng với hình slide đầu tiên
            if (eindex == count - 1) { eindex = -1; }
            eindex++;
            setimagefocus();
        }

        start_slideswap();
        // Thay đổi giá trị biến timeinterval bên dưới để thay đổi thời gian chuyển đổi giữa 2 hình
        function start_slideswap() {
            timeinterval = 1000;
            play = setInterval(slideswap, timeinterval);
        }

        // Xử lý khi đưa chuột vào slide thì dừng lại quá trình tự động chuyển hình
        $(".banner").hover(function () {
            clearInterval(play);
        }, function () {
            start_slideswap();
        });

    })
</script>

     
<h2>Trang chủ</h2>
<p id="p1">Chào mừng bạn đến với thế giới di động anh em, giờ thì hãy @Html.ActionLink("shopping", "Index", "Phone", null, new { style="color: #ff6a00; font-weight:bold; font-size: 13px"}) theo phong cách của bạn nhé.! ^^</p>
<div class="slideshow">
<div class="banner">                   
    <div class="img"><img src="..\..\Content\Images\banner_1.png" alt="Banner" /></div>
    <div class="img"><img src="..\..\Content\Images\banner_2.png" alt="Banner" /></div>
    <div class="img"><img src="..\..\Content\Images\banner_3.png" alt="Banner" /></div>
    <div class="img"><img src="..\..\Content\Images\banner_4.png" alt="Banner" /></div>
    <div class="img"><img src="..\..\Content\Images\banner_5.png" alt="Banner" /></div>
    <div class="img"><img src="..\..\Content\Images\banner_6.png" alt="Banner" /></div> 
</div><!--end #banner-->    
    <div class="slidernavigator">
        <ul></ul>
    </div>
</div>
